<template>
    <vxe-modal v-model="systemSettingComponentStore.showSystemSetting"
               esc-closable
               show-footer
               show-confirm-button
               title="系统设置">

        <vxe-row>
            <vxe-col span="24">
                <vxe-upload v-if="userStore.userInfo?.imageUrl"
                            :model-value="userStore.userInfo?.imageUrl"
                            mode="image"
                            size="mini"
                            :upload-method="uploadMethod"/>
                <vxe-upload v-else mode="image" size="mini" :upload-method="uploadMethod"/>
            </vxe-col>
        </vxe-row>

        <vxe-row style="margin-top: 10px">
            <vxe-col span="24">
                <div class="div-container">
                    <vxe-text>系统主题：</vxe-text>
                    <!-- 主题切换开关 -->
                    <vxe-switch
                        class="right-item-comp"
                        v-model="currTheme"
                        open-value="light"
                        open-label="浅色"
                        close-value="dark"
                        close-label="深色">
                    </vxe-switch>
                </div>
            </vxe-col>
        </vxe-row>
    </vxe-modal>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/UseAppStore.ts';
import { computed } from 'vue';
import { useSystemSettingComponentStore } from '@/store/UseSystemSettingComponentStore.ts';
import { VxeUploadPropTypes } from 'vxe-pc-ui';
import PromiseUtils from '@/utils/PromiseUtils.ts';
import { useUserStore } from '@/store/UseUserStore.ts';

const appStore = useAppStore();
const userStore = useUserStore();
const systemSettingComponentStore = useSystemSettingComponentStore();

// 当前主题
const currTheme = computed({
    get () {
        return appStore.theme;
    },

    set (name) {
        appStore.setTheme(name);
    }
});

// 上传接口
const uploadMethod: VxeUploadPropTypes.UploadMethod = ({ file }) => {
    systemSettingComponentStore.uploadUserImage(file).then((data) => {
        userStore.userInfo = data;
    });
    return PromiseUtils.resolve();
}
</script>